<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>点名管理</title>
  <link rel="stylesheet" href="./../../static/student/css/style.css">
  <script defer src="./../../static/student/js/S-attendance-management.js"></script>
</head>
<body>
  <!-- 顶部导航栏 -->
  <header class="navbar">
    <div class="logo">Student Panel</div>
    <h1>点名管理</h1>
    <div class="user-info">
      <img src="student-avatar.jpg" alt="Student Avatar" class="avatar">
      <button class="logout-btn" id="logout-btn">退出</button>
    </div>
  </header>

  <!-- 侧边导航栏 -->
  <aside class="sidebar">
    <ul>
      <li><a href="student-home.html">首页</a></li>
      <li><a href="learning-management.html">学习管理</a></li>
      <li><a href="S-attendance-management.html">点名管理</a></li> <!-- 当前页面 -->
    </ul>
  </aside>

  <!-- 主内容区域 -->
  <main>
    <!-- 点名记录部分 -->
    <section class="attendance-records">
      <h2>我的点名记录</h2>

      <!-- 筛选功能 -->
      <section class="attendance-filter">
        <label for="attendance-course">选择课程:</label>
        <select id="attendance-course" onchange="filterAttendanceByCourse()">
          <option value="">全部课程</option>
          <option value="计算机科学基础">计算机科学基础</option>
          <option value="现代数学分析">现代数学分析</option>
        </select>

        <label for="attendance-status">选择状态:</label>
        <select id="attendance-status" onchange="filterAttendanceByStatus()">
          <option value="">全部状态</option>
          <option value="出席">出席</option>
          <option value="缺席">缺席</option>
          <option value="迟到">迟到</option>
        </select>
      </section>

      <!-- 点名记录表格 -->
      <table id="attendance-table">
        <thead>
          <tr>
            <th>课程</th>
            <th>日期</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <!-- 通过 JavaScript 动态生成数据 -->
        </tbody>
      </table>

      <!-- 分页 -->
      <section class="pagination">
        <button onclick="previousPage()">上一页</button>
        <button onclick="nextPage()">下一页</button>
      </section>
    </section>
  </main>

  <!-- 底部信息 -->
  <footer class="footer">
    <p>© 2024 Student Panel, All Rights Reserved</p>
    <a href="/help">帮助</a> | <a href="/contact">联系我们</a>
  </footer>
</body>
</html>
